<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="我的志愿" />
		<view>
			<view class="container">
				<view class="list">
					<view class="item" v-for="(item, index) in volunteerList.list" :key="index">
						<view class="space-block"></view>
						<view class="content-box">
							<view class="top fboxRow Xbetween Ycenter">
								<view class="left fboxRow font30" @tap="gotoSchool(item.schoolId)">
									<view class="rank"
										:class="index == 0 ? 'border-E85531' : index == 1 ? 'border-FF9645' : index == 2 ? 'border-00C15D' : 'border-A3A4AD'">
										<view
											class="fboxCol Xcenter Ycenter" :class="index == 0 ? 'color-E85531 bg-FAE6E1' : index == 1 ? 'color-FF9645 bg-FFEEE0' : index == 2 ? 'color-00C15D bg-DAF7E8' : 'color-A3A4AD bg-F0F0F5'">
											<view class="font20">{{index + 1}}</view>
											<view class="font24">{{item.admitRate}}</view>
										</view>
									</view>
									<view class="fboxCol Xaround flex1">
										<view class="color-36363A font28">
											{{item.majorName}}({{item.majorCategoryId}})</view>
										<view class="color-9899A1 font22">{{item.schoolName}}({{item.schoolId}})
										</view>
									</view>
								</view>
								<view class="right">
									<view v-if="!item.isVolunteer">
										<view class="btn uncheckbtn fboxRow Xcenter Ycenter font14" @tap="onVolunteer(item, index, true)">
											<text>+</text>
											<text style="margin-left: 4rpx">志愿</text>
										</view>
									</view>
									<view v-if="item.isVolunteer">
										<view class="btn color-9899A1 font14" @tap="onVolunteer(item, index, false)">
											<text>-</text>
											<text style="margin-left: 4rpx">志愿</text>
										</view>
									</view>
								</view>
							</view>
							<view class="bottom fboxRow Xaround">
								<view class="item font22">
									<view class="color-9899A1">{{item.year - 1}}最低分</view>
									<view class="color-36363A mt8">{{item.min != null ? item.min + '分' : '-'}}</view>
								</view>
								<view class="item font22">
									<view class="color-9899A1">{{item.year - 1}}最低位次</view>
									<view class="color-36363A mt8">{{item.minSection != null ? item.minSection + '名' : '-'}}</view>
								</view>
								<view class="item font22">
									<view class="color-9899A1">{{item.year - 1}}录取</view>
									<view class="color-36363A mt8">{{item.recruitNum != null ? item.recruitNum + '人' : '-'}}</view>
								</view>
								<view class="item font22" v-if="isPlan">
									<view class="color-9899A1">{{item.year}}计划</view>
									<view class="color-36363A mt8">{{item.recruitNumPlan != null ? item.recruitNumPlan + '人' : '-'}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore style="padding-bottom: 40rpx;" :status="volunteerList.loading" />
				</view>
				<view class="btn-group">
					<view class="btn" @tap="showTips">
						<text class="bksCIcon bks-c-ziyuan158tanhao color-fff font42"></text>
					</view>
					<view class="btn" @tap="goPage">
						<text class="bksCIcon bks-c-ziyuan119tianjia color-fff font36"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		volunteerList,
		volunteerAdd,
		volunteerDel,
		scoreGrades
	} from '@/api/bks.volunteer.js'
	import {
		commentState
	} from '@/api/bks.consult.js'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				volunteerList: { // 模拟志愿列表
					list: [],
					page: 1,
					size: 10,
					total: 0,
					loading: 'loading'
				},
				refresherTriggered: false,
				batchName: '本科批',
				examAnalysisId: '',
				isPlan: false
			}
		},
		onLoad(options) {
			commentState({
				type: 2
			}).then(res => {
				this.isPlan = res.data
			})
		},
		onShow() {
			this.init()
			this.getExamAnalysisId()
		},
		methods: {
			// 数据初始化
			init() {
				this.volunteerList = {
					list: [],
					page: 1,
					size: 10,
					total: 0,
					loading: 'loading'
				}
			},
			changeFilter(e) {
				this.batchName = e.detail
				this.init()
				this.getVolunteerList()
			},
			getVolunteerList() {
				if (this.volunteerList.loading == 'not') {
					return
				}
				this.volunteerList.loading = 'loading'
				const { page, size } = this.volunteerList
				volunteerList({
					batchName: this.batchName,
					examAnalysisId: this.examAnalysisId,
					page,
					size
				}).then(res => {
					const {list, pageInfoVO} = res.data
					let resList = []
					list.forEach(item => {
						item.admitRate = Math.round(item.admitRate * 100) + '%'
						resList.push({
							...item,
						})
					})
					this.volunteerList.list = this.volunteerList.list.concat(resList)
					this.volunteerList.total = pageInfoVO.total
					if(pageInfoVO.total <= pageInfoVO.page * pageInfoVO.size){
						this.volunteerList.loading = 'nomore'
					}
				})
			},
			// 下拉加载数据
			reachBottom() {
				const { page, size, total } = this.volunteerList
				if(total > page * size){
					this.volunteerList.page++
					this.getVolunteerList()
				}
			},
			// 添加志愿
			onVolunteer(item, index, status) {
				let fn = volunteerAdd;
				let title = '已添加'
				if (!status) {
					fn = volunteerDel
					title = '已取消'
				}
				// batchName:  this.data.batchName,
				// examAnalysisId: item.examAnalysisId,
				fn({
					majorCategoryId: item.majorCategoryId,
					majorScoreId: item.majorScoreId,
					schoolId: item.schoolId,
					batchName: this.batchName,
					examAnalysisId: this.examAnalysisId,
				}).then(res => {
					if (res.data) {
						this.volunteerList.list[index].isVolunteer = status
						// this.volunteerList.list = list
						uni.showToast({
							title,
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: '取消失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			gotoSchool(id) {
				this.$pageTo('/bks/index/school/index/index', { id })
			},
			// 展示tips
			showTips() {
				uni.showModal({
					showCancel: false,
					confirmColor: '#00C15D',
					content: '数据来源于院校相关年限的招生计划与分数，且这些数据都来源于网络收集，备考生基于这些数据与成绩大数据进行智能分析，数据与分析结果仅供参考，本页数据仅是志愿的模拟，真实志愿请以考试院填报为准，感谢您的关注。'
				})
			},
			// 跳转推荐院校
			goPage() {
				this.$pageTo('/bks/volunteer/academy/index', {
					activeTab: '0',
					examAnalysisId: this.examAnalysisId
				})
			},
			// 考试id
			getExamAnalysisId() {
				scoreGrades({
					examId: ''
				}).then(res => {
					this.examAnalysisId = res.data.id
					this.getVolunteerList()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list .item .content-box {
		padding: 40rpx 30rpx;
		background-color: #fff;
	}

	.container {
		position: relative;
	}

	.container .btn-group {
		position: fixed;
		bottom: 98rpx;
		right: 23rpx;
	}

	.container .btn-group .btn {
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(-45deg, #FAA40F 0%, #FFCE7A 100%);
		box-shadow: 0px 0px 10rpx 0px rgba(0, 8, 16, 0.1);
		border-radius: 50%;
		margin-top: 30rpx;
	}

	.list>.item .content-box .top {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #F0F0F5;
	}

	.list>.item .content-box .top .rank {
		width: 80rpx;
		height: 80rpx;
		border-width: 2px;
		border-style: solid;
		border-radius: 50%;
		margin-right: 20rpx;
		padding: 5rpx;
	}

	.list>.item .content-box .top .rank>view {
		width: 100%;
		height: 100%;
		line-height: 22rpx;
		border-radius: 50%;
	}

	.list>.item .content-box .top .right .btn {
		width: 118rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		border-radius: 6rpx;
		font-size: 24rpx;
		background: #fff;
		border: 1px solid #C7C8D4;
	}

	.list>.item .content-box .top .right .uncheckbtn {
		border: 1px solid #00C15D;
		color: #00C15D;
	}

	.list>.item .content-box .bottom {
		padding-top: 30rpx;
		text-align: center;
	}
</style>